<template>
    <div style="overflow:hidden;">
        <Tree :data="baseData" @on-select-change="getSelectedNodes" style="width:184px;height:620px;float:left;border:1px solid #ddd;padding:5px;margin-right:4px;"></Tree>
        <Button type="primary" @click="addData">添加</Button>
        <Button type="primary" @click="removeData">删除</Button>
        <Button type="primary" @click="refeshData">刷新</Button>
        <Input v-model="filter.title" style="width:820px;" placeholder="请输入...">
            <Button slot="append" icon="ios-search" @click="search"></Button>
        </Input>
        <Table border :columns="columns1" :data="list" @on-select="selected" style="width:820px;float:left"></Table>
        <Page :total="filter.total" show-elevator show-total size="small" show-sizer @on-page-size-change="onPageSizeChange" :page-size="10" @on-change="changePage"></Page>

        <Modal
            v-model="modal1"
            title="新闻信息"
            @on-ok="ok"
            @on-cancel="cancel" 
            >
            
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="标题" prop="title">
                    <Input v-model="formValidate.title" placeholder="请输入标题"></Input>
                </FormItem>
                <FormItem label="副标题" prop="ftitle">
                    <Input v-model="formValidate.ftitle" placeholder="请输入副标题"></Input>
                </FormItem>
                <FormItem label="作者" prop="author">
                    <Input v-model="formValidate.author" placeholder="请输入作者"></Input>
                </FormItem>
                <FormItem label="内容" prop="content">
                    <quillEditor v-model="formValidate.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></quillEditor>             
                    <!-- <Input v-model="formValidate.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input> -->
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    import Base from '../../common/Base.js';
    import { quillEditor } from 'vue-quill-editor';
    export default {
        components: {
            quillEditor
        },
        mixins:[Base],
        data () {
            return {
                module:'news',
                baseData: [],
                // cid:null,
                btn:'',
                columns1: [
                    {
                        type: 'selection',
                        width: 55,
                        align: 'center'
                    },
                    {
                        type: 'index',
                        width: 55,
                        align: 'center'
                    },
                    {
                        title: '标题',
                        key: 'title',
                        width:160
                    },
                    {
                        title: '作者',
                        key: 'author',
                        width:150
                    },
                    {
                        title: '日期',
                        key: 'data'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 184,
                        render: (h, params) => {
                            return h('div', [
                                // h('Button', {
                                //     props: {
                                //         type: 'text',
                                //         size: 'small'
                                //     },
                                //     on:{
                                //         click:()=>{
                                //             this.show(params.row._id);
                                //         }
                                //     }
                                // }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on:{
                                        click:()=>{
                                            this.editData(params.row._id)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row._id);
                                        }
                                    }
                                }, '删除'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on:{
                                        click:()=>{
                                            this.showData(params.row._id);
                                        }
                                    }
                                }, '查看评论'),
                            ]);
                        }
                    }
                ],
                // data1: [],
                formValidate: {
                    title: '',
                    ftitle: '',
                    author: '',
                    data: '',
                    content: ''
                },
                ruleValidate: {
                    title: [
                        { required: true, message: '标题不能为空', trigger: 'blur' }
                    ],
                    author: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入内容', trigger: 'blur' },
                        { type: 'string', min: 20, message: '内容不能少于20字', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            handleReset (title) {
                this.$refs[title].resetFields();
            },
            ok () {
                this.$Message.info('点击了确定');
            },
            cancel () {
                this.$Message.info('点击了取消');
            },
            //查看按钮，显示对话框 
            show (id) {
                // console.log(this.formValidate)
                this.$Modal.info({
                    title: '新闻信息',
                    content: `标题：`
                })
            },
            showData(id){
                this.$router.push({path:'/comment/' + id});
                console.log(id) 
            },
            getSelectedNodes(obj){   //点击树节点，得到当前点击的id
                // console.log(obj[0]);  //获取点击元素的id
                this.cid = obj[0]._id;
                this.getNews(this.cid);  //调用函数
            },
            getNews(cateId){  //显示新闻数据列表
                this.$http({
                    method:'post',
                    url:`http://localhost:3000/news/list`,
                    data:{
                        cateId:cateId     //前者是字段（后台），后者是参数
                    }
                }).then(res => {
                    this.list = res.data.rows;
                    this.filter.total = res.data.total;
                })
            },
            getTree(){  //刷新
                this.$http({
                    method:'get',
                    url:'http://localhost:3000/cate/list/1',
                    data:this.baseData
                }).then(res => {
                    this.baseData = res.data;
                })
            },
            selected(secition){
                // console.log(secition)
                this.ids = secition;
            },
            refeshData(){
                this.getData();
            }
        },
        created(){
            this.getTree();
        }
    }
</script>
